// 登录操作
const form = document.querySelector('form')
const nameInp = document.querySelector('.username')
const pwdInp = document.querySelector('.password')
const errBox = document.querySelector('.error')

// 1. 绑定事件
form.addEventListener('submit', e => {
  e = e || window.event
  try { e.preventDefault() } catch(err) { e.returnValue = false }

  // 2. 拿到用户输入的内容
  const name = nameInp.value
  const pwd = pwdInp.value

  // 3. 非空验证
  if (!name || !pwd) return window.alert('请完整填写表单')

  // 4. 发送请求
  const xhr = new XMLHttpRequest()

  xhr.open('POST', '../../server/login.php')

  xhr.onload = () => loginHandler(xhr)

  // POST 请求, 需要携带参数, 设置请求头
  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

  xhr.send(`username=${ name }&password=${ pwd }`)

})

// 登录的处理函数
function loginHandler(xhr) {
  // 接受后端的响应
  const res = JSON.parse(xhr.responseText)
    console.log(res)
  // 登录失败 让错误文本显示出来
  if (res.code === 0) {
    errBox.classList.add('active')
    return
  }

  // 登录成功
  // 我需要向 lcoalStorage 内存储一个数据, 表示我登录成功过
  window.localStorage.setItem('login', 1)
  // 把登录成功以后, 后端给我的 "凭证" 保存起来, 别的页面也需要使用呢
//   window.localStorage.setItem('token', res.token)
  // 把当前用户的 id 存储起来
  window.localStorage.setItem('id', res.info[0].Id)
  window.localStorage.setItem('nickname', res.info[0].nickname)
  // 获取一下 localStorage 内的 url 字段, 如果有内容
  // 表示我是从某一个页面跳转过来的, 还回到这个页面
  // 如果没有这个字段, 就跳转到 index 页面

  // 从 localStorage 内拿到一个叫做 url 的键
  const url = window.localStorage.getItem('url')
  window.localStorage.removeItem('url')

  // 跳转页面(暂时跳转到首页)
  window.location.href = `./${ url ? url : 'index' }.html`
}
